<template>
    <div class="car">
        <div class="car-left">
            <div class="car-icon-wrapper" @click="ShowCarContent">
                <i class="car-icon icon-shopping_cart" :class="clickCar"></i>
                <span class="ball" id="car"  v-show='showCountBox'>{{ this.$store.getters.allCount }}</span>
            </div>
            <div class="price border-right">
                ￥{{this.$store.getters.allPrice}}
            </div>
            <div class="extra">
                另需配送费￥{{seller.deliveryPrice}}
            </div>
        </div>
        <div class="car-right">
            <div class="pay" :class="{enough:seller.minPrice !== 0}">
                ￥{{seller.minPrice}}元起配送
            </div>
        </div>
        <transition>
            <div class="car-foods-wrapper" v-show="isShowCarContent">
                <div class="car-foods">
                    <div class="car-foods-header">
                        <span class="left">购物车</span>
                        <span class="right" @click="empty">清空</span>
                    </div>
                    <div class="car-scroll" ref='carScroll'>
                        <ul class="foods-wrapper">
                            <li class="foods-item" v-for="(item, index) in carCommodity" :key="index">
                                {{ item.name }}
                                <div class="right">
                                    <div class="yuan">
                                        <div class="yuan-right">
                                            ￥
                                            <span class="money">{{item.price}}</span>
                                        </div>
                                    </div>
                                    <div class="car-control">
                                        <div>
                                            <car-control :foods='item'></car-control>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import CarControl from './CarControl'
export default {
  name: 'AllCount',
  props: ['seller'],
  data () {
    return {
      isShowCarContent: false,
      flag: true,
      clickCar: ''
    }
  },
  computed: {
    carCommodity () {
      return this.$store.state.carRes
    },
    showCountBox () {
      return this.$store.getters.allCount
    }
  },
  methods: {
    ShowCarContent () {
      if (this.flag) {
        this.isShowCarContent = true
        this.clickCar = 'clickCar'
        this.flag = false
      } else {
        this.isShowCarContent = false
        this.flag = true
        this.clickCar = ''
      }
    },
    initializeSceoll () {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.carScroll, {
          click: true
        })
      } else {
        this.$nextTick(() => {
          this.scroll.refresh()
        })
      }
    },
    empty () {
      this.$store.commit('emptyFoods')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.carScroll, {
        click: true
      })
      this.initializeSceoll()
    })
  },
  components: {
    CarControl
  }
}
</script>

<style lang="stylus" scoped>
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateY(100%);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.8s ease;
}
.border-right:before{
    right -.24rem
    height .48rem
    margin-top -.24rem
    top 50%
    border-color rgba(255,255,255,.6)
}
.car{
    position relative
    height .96rem
    background #141d27
    display flex
    .car-left{
        overflow hidden
        flex 1
        .car-icon-wrapper{
            position absolute
            width 1.08rem
            height 1.08rem
            background: #141d27
            border-radius 50%
            left .24rem
            bottom .04rem
            padding .12rem
            box-sizing border-box
            .car-icon{
                display inline-block
                width 100%
                height 100%
                border-radius 50%
                background #2b343c
                font-size .48rem
                line-height 0.92rem
                color: #80858a
                text-align center
                vertical-align middle
            }
            .clickCar{
                color rgb(255,255,255)
                background rgb(0,160,220)
            }
            .icon-shopping_cart:before{
                content '\E907'
            }
            .ball{
                width: .48rem
                height: .32rem
                position: absolute
                right: 0
                top: 0
                z-index: 9
                background-color: red
                border-radius: .12rem
                text-align center
                line-height .32rem
                font-size .18rem
                font-weight 700
                color #ffffff
                box-shadow 0 4px 8px 0 rgba(0,0,0,.4)
            }
        }
        .price{
            color rgba(255,252,252,.4)
            // position absolute
            margin-left 1.6rem
            float left
            font-size .32rem
            font-weight 700
            line-height .96rem
        }
        .extra{
            float left
            margin-left 0.55rem
            line-height .96rem
            font-size .24rem
            color rgba(255,252,252,.4)
        }
    }
    .car-right{
        width 2.1rem
        height 100%
        background #2B333B
        flex 0 0 2.1rem
        .pay{
            text-align: center;
            font-size: .24rem;
            font-weight: 700
            color rgba(255,255,255,.4)
            height 100%
            line-height .96rem
        }
        .enough{
            background: #00b43c;
            color: #fff;
        }
    }
    .car-foods-wrapper{
        width 100%
        backdrop-filter: blur(10px)
        background: rgba(7,17,27,.8)
        position fixed
        z-index -1
        top 0
        bottom .96rem
        .car-foods{
            position absolute
            background #ffffff
            width 100%
            bottom 0
            .car-foods-header{
                height .8rem
                width 100%
                background #f3f5f7
                border-bottom 1px solid rgba(7,17,27,.1)
                padding 0 .36rem
                box-sizing border-box
                .left{
                    float left
                    line-height .8rem
                    font-size .28rem
                    font-weight 200
                    color rgb(7,17,27)
                }
                .right{
                    font-size .24rem
                    color rgb(0,160,220)
                    float right
                    line-height .8rem
                }
            }
            .car-scroll{
                height 4rem
                overflow hidden
                .foods-wrapper{
                    padding 0 .36rem
                    .foods-item{
                        display flex
                        align-items center
                        line-height .96rem
                        height .96rem
                        border-bottom 1px solid rgba(7,17,27,.1)
                        font-size .28rem
                        color rgb(7,17,27)
                        .right{
                            display flex
                            align-items center
                            flex 1
                            font-size .48rem
                            line-height .96rem
                            color rgb(0,160,220)
                            vertical-align middle
                            .yuan{
                                flex 1
                                font-size .2rem
                                font-weight normal
                                color rgb(240,20,20)
                                float right
                                .yuan-right{
                                    float right
                                    margin-right .2rem
                                    .money{
                                        font-size .28rem
                                        font-weight 700
                                    }
                                }
                            }
                            .car-control{
                                flex 0 0 1.5rem
                                div{
                                    float right
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
